<template>
  <el-form ref="form" label-width="80px" size="normal" :model="skuForm">
    <el-form-item label="SPU名称" size="normal">
      {{ spu.spuName }}
    </el-form-item>
    <el-form-item label="SKU名称" size="normal">
      <el-input
        placeholder="SKU名称"
        size="normal"
        v-model="skuForm.skuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)" size="normal">
      <el-input
        type="number"
        placeholder="价格元"
        v-model="skuForm.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(KG)" size="normal">
      <el-input
        type="number"
        placeholder="重量KG"
        v-model="skuForm.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="规则描述" size="normal">
      <el-input
        type="textarea"
        placeholder="规格描述"
        v-model="skuForm.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性" size="normal">
      <el-form label-width="80px" :inline="true" size="normal">
        <!--平台属性展示的地方-->
        <el-form-item
          :label="attr.attrName"
          size="normal"
          v-for="(attr, index) in attrArr"
          :key="attr.id"
        >
          <el-select placeholder="请选择" v-model="attr.attrIdAndValId">
            <el-option
              :label="val.valueName"
              :value="`${attr.id}:${val.id}`"
              v-for="(val, index) in attr.attrValueList"
              :key="val.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性" size="normal">
      <el-form label-width="80px" :inline="true" size="normal">
        <el-form-item
          :label="sale.saleAttrName"
          size="normal"
          v-for="(sale, index) in saleArr"
          :key="sale.id"
        >
          <el-select placeholder="请选择" v-model="sale.attrIdAndValId">
            <el-option
              :label="val.saleAttrValueName"
              :value="`${sale.id}:${val.id}`"
              v-for="(val, index) in sale.spuSaleAttrValueList"
              :key="val.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片列表" size="normal">
      <el-table border stripe :data="imgArr">
        <el-table-column type="selection" width="80px"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{ row, $index }">
            <img :src="row.imgUrl" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row, $index }">
            <el-button
              type="primary"
              size="default"
              v-if="row.isDefault == 0"
              @click="changeDefault(row)"
              >设置默认</el-button
            >
            <el-button type="danger" size="default" v-else>默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

    <el-form-item size="normal">
      <el-button type="primary" size="default" icon="el-icon-eye" @click="save"
        >保存</el-button
      >
      <el-button size="default" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //平台属性数据
      attrArr: [],
      //销售属性
      saleArr: [],
      //照片的数据
      imgArr: [],
      //收集添加SKU参数
      skuForm: {
        //父组件传递过来的
        category3Id: "", //三级分类的ID
        spuId: "", //SPU的ID
        tmId: "", //品牌的ID
        skuName: "", //实例SKU的名字
        price: "", //价格
        weight: "", //重量
        skuDesc: "", //描述
        skuAttrValueList: [
          //平台属性
          // {
          //   attrId: "", //属性ID
          //   valueId: "", //属性值的ID
          // },
        ],
        skuSaleAttrValueList: [
          //销售属性
          // {
          //   saleAttrId: "", //属性ID
          //   saleAttrValueId: "", //属性值的ID
          // },
        ],
        skuDefaultImg: "", //默认图片的地址
      },
      //存储SPU类的信息
      spu:{},
    };
  },
  methods: {
    async save() {
      //第一步:整理参数,整理成服务器需要形式
      //第二步：发请求添加SKU
      //第三步:请求成功、失败干什么

      //参数:平台属性、销售属性
      //写法:第一种 ----reduce
      // let newAttr = [];
      // this.attrArr.forEach(item=>{
      //     if(item.attrIdAndValId){
      //       const [attrId,valueId]  = item.attrIdAndValId.split(':');
      //       newAttr.push({attrId,valueId});
      //     }
      // });
      // console.log(newAttr);
      
      //第二种写法:工作的时候以功能为主
      this.skuForm. skuAttrValueList = this.attrArr.reduce((prev,next)=>{
            if(next.attrIdAndValId){
              const [attrId,valueId]  = next.attrIdAndValId.split(':');
              prev.push({attrId,valueId});
            }
            return prev;
      },[]);
      //整理销售属性的
      this.skuForm. skuSaleAttrValueList = this.saleArr.reduce((prev,next)=>{
                if(next.attrIdAndValId){
                  let [saleAttrId,saleAttrValueId] = next.attrIdAndValId.split(":");
                  prev.push({saleAttrId,saleAttrValueId});
                }
                return prev;
      },[]);

      //发请求添加SKU
     try {
       await this.$ajax.spu.reqAddSku(this.skuForm); 
       //通知父组件切换场景
       this.$emit('changeScene',{scene:0,flag:''});
       //提示信息
       this.$message({type:'success',message:'添加SKU成功'});
     } catch (error) {
        this.$message({type:'error',message:'添加SKU失败'});
     }


    },
    cancel() {
      this.$emit("changeScene", { scene: 0, flag: "addSku" });
    },
    //初始化SKU请求的地方----三个请求
    async initSkuData(c1, c2, spu) {
      //清空数据
      this.reset();
      //存储类的信息
      this.spu = spu;
      //收集三级分类的ID、SPU类的ID、类品牌的ID
      this.skuForm.category3Id = spu.category3Id;
      this.skuForm.spuId = spu.id;
      this.skuForm.tmId = spu.tmId;
      //获取平台属性的数据
      let ps1 = this.$ajax.spu.reqAttrList(c1, c2, spu.category3Id);
      //销售属性
      let ps2 = this.$ajax.spu.reqSaleAttrList(spu.id);
      //照片墙的数据
      let ps3 = this.$ajax.spu.reqSpuImageList(spu.id);
      let result = await Promise.all([ps1, ps2, ps3]);
      //存储服务器的数据
      this.attrArr = result[0].data;
      this.saleArr = result[1].data;
      this.imgArr = result[2].data;
      //给照片墙的数据动态添加标记：控制按钮的显示与隐藏
      this.imgArr = this.imgArr.map(item=>{
          return {
            ...item,
            isDefault:0, //0设置默认按钮  1：默认按钮  
          }
      })

    },
    //照片列表的方法
    changeDefault(row){
     //全部的照片isDefault设置为零
     this.imgArr.forEach(item=>{
         item.isDefault = 0;
     })
     //选中应该设置为1
     row.isDefault = 1;
     //收集默认图片地址
     this.skuForm.skuDefaultImg = row.imgUrl;
    },

    //清空数据
    reset(){
       this.attrArr = [];
       this.saleArr = [];
       this.imgArr = [];
       this.spu = {};
       this.skuForm =  {
        //父组件传递过来的
        category3Id: "", //三级分类的ID
        spuId: "", //SPU的ID
        tmId: "", //品牌的ID
        skuName: "", //实例SKU的名字
        price: "", //价格
        weight: "", //重量
        skuDesc: "", //描述
        skuAttrValueList: [
          //平台属性
          // {
          //   attrId: "", //属性ID
          //   valueId: "", //属性值的ID
          // },
        ],
        skuSaleAttrValueList: [
          //销售属性
          // {
          //   saleAttrId: "", //属性ID
          //   saleAttrValueId: "", //属性值的ID
          // },
        ],
        skuDefaultImg: "", //默认图片的地址
      }
    }
  },
};
</script>

<style scoped>
</style>
